<template>
  <div class="app-container">
      <div class="filter-container">
        <el-select v-model="search.type" clearable placeholder="状态" style="width: 130px; margin-left:10px;">
            <el-option 
            v-for="(item,index) in selectOptions.state"
            :key="index"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
        <el-button type="success" icon="el-icon-folder-add" @click="handleAdd()" >新增</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="图片">
        <template slot-scope="scope">
          <span><bx-image :src="scope.row.imageConvert"  :width="50" :height="50" :show-delete="false"></bx-image> </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="金额">
        <template slot-scope="scope">
          <span>满 {{ (scope.row.overPrice/100) }} 元减  {{(scope.row.couponPrice/100)}}元</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="10%" align="center" label="数量">
        <template slot-scope="scope">
          <span>{{ scope.row.count }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="已领取">
        <template slot-scope="scope">
          <span>{{scope.row.geted}}</span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="已使用">
        <template slot-scope="scope">
          <span>{{ scope.row.used }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column  min-width="10%" label="状态">
        <template slot-scope="scope">
            <span>{{scope.row.state}}</span>
        </template>
      </el-table-column> -->
      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  min-width="15%">
        <template slot-scope="scope">
          <!-- <el-popconfirm v-if="scope.row.state==1" title="确定要下架该优惠券吗？" icon="el-icon-info"  icon-color="red"  @onConfirm="handleState(scope.row.id,false)" >
            <el-button slot="reference" type="warning" size="small">
              下架
            </el-button>
          </el-popconfirm>
          <el-popconfirm v-if="scope.row.state==0" title="确定要上架该优惠券吗？" icon="el-icon-info"  icon-color="green"  @onConfirm="handleState(scope.row.id,true)" >
            <el-button slot="reference" type="primary" size="small">
              上架
            </el-button>
          </el-popconfirm> -->
          <el-popconfirm title="确定要删除该优惠券吗？" icon="el-icon-info"  icon-color="green"  @onConfirm="handleDelete(scope.row._id)" >
            <el-button slot="reference" type="danger" size="small" style="margin-left:10px;">
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as courseApi from '@/api/courseinfo'
import * as shopApi from '@/api/shop'
import * as couponApi from '@/api/coupon'
import * as uploadApi from '@/api/upload'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'

export default {
  name: 'CouponInfoShop',
  components: { Pagination,BxImage },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        type:-1,
      },
      search:{
        orderName:'',
        orderNum:'',
        type:'',

      },
      selectOptions:{
          state:[
              {label:'上架中',value:'1'},
              {label:'已下架',value:'0'},
          ],
      }
    }
  },
  created(){
      var that=this;
      that.getList();
  },
  mounted(){

  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      couponApi.getCouponListForShop(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.map((item,index)=>{
              item._id=index+1;
              item.imageConvert=imageHelper.GetFullUrl(item.shopLogo,200,200);
              item.state=1;
              
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.orderName=that.search.orderName;
      that.listQuery.orderNum=that.search.orderNum;
      that.listQuery.type=that.search.type;
      that.getList();
    },
    handleState(id,state){
        this.$message({
            message:'尚未实现~',
            type:'info'
        })
    },
    handleAdd(){
        this.$router.push({path: "/ordermanage/voucherdetail/0"})
    },
    handleDelete(_id){
        var that=this;
        var index=that.list.findIndex(item=>item._id==_id);
        if(index<0){
            that.$message({
                message: '数据异常,请刷新界面',
                type: 'danger'
            });
            return;
        }
        couponApi.deleteCouponForShop(that.list[index]).then(res=>{
            if(res.data){
                //删除该行记录
                that.list.splice(index,1);
                that.$message({
                    message: '删除成功',
                    type: 'success'
                });
            }
        })
    }
    
  }
}
</script>
